<template>
  <div :style="itemStyle" class="question-item" :class="{ 'show-border': showBorder }">
    <div class="question-content">
      <div
        class="content-html clearfix"
        style="font-family: SimSun; font-size: 15.5pt; line-height: 1.5"
        v-html="formatContentHtml(questionInfo.questionContent)"
      ></div>
    </div>

    <div v-if="isEdit" class="edit-mask no-print">
      <div class="top-button-group">
        <slot name="tools-button"></slot>
      </div>
    </div>
  </div>
</template>
<script>
const defaultForm = {
  id: undefined,
};
export default {
  components: {},
  props: {
    questionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    questionIndex: {
      type: Number,
      default: 0,
    },
    active: {
      type: Boolean,
      default: false,
    },
    showBorder: {
      type: Boolean,
      default: true,
    },
    borderColor: {
      type: String,
      default: "#CCCFE1",
    },
    activeBorderColor: {
      type: String,
      default: "#1890FF",
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      questionInfo: null,
    };
  },
  computed: {
    itemStyle() {
      let style = {};
      if (this.showBorder) {
        style["borderColor"] = this.active ? this.activeBorderColor : this.borderColor;
      }
      return style;
    },
  },
  watch: {
    questionData(data) {
      this.questionInfo = data;
    },
  },
  created() {
    this.questionInfo = this.questionData;
  },
  methods: {
    formatContentHtml(html) {
      let serialNumber = `<span class="serial-number">${this.questionIndex + 1}.</span>`
      let execHtml = /^\s*<[a-zA-Z]+(\s\w+=["'][\w-. :;]*["'])*>/.exec(html);
      if(html && execHtml && execHtml[0]) {
        return `${execHtml[0]} ${serialNumber} ${html.substring(execHtml[0].length)}`
      } else {
        return `${serialNumber} ${html}`
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.question-item {
  position: relative;
  padding: 30px;
  &.show-border {
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
  }

  .edit-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;

    .top-button-group {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .content-html {
    word-wrap: break-word;

    ::v-deep {
      .serial-number {
        // float: left;
      }

      img {
        vertical-align: middle;
      }
      p {
        margin: 0;
        padding: 0;
      }
    }
  }
}
</style>
